<template lang="html">
  <div class="wrap">
    <van-popup v-model="showPay" position="top" :overlay="false" style="height:100vh;width:100vw">  
    <v-Money ref="moneyPage" :pay="pay" :order="topayorder" @SetState="onSetState(false)"></v-Money>
 
    </van-popup>
    <v-gologin v-if="!$store.state.login.token"></v-gologin>
    <van-popup v-model="showPic" >
        <img v-if="item.IF_TICKET_OUT==1" style="max-width:400px;max-height:600px" :src="Util.FixPic(item.TICKET_PIC)" />
        <img v-if="item.IF_TICKET_OUT!=1" style="max-width:400px;max-height:600px" :src="Util.FixPic('/sysapi/travel/Ticketpic/?'+Util.paraAddKey({'id':item.ID,'sys_data_from':2},null,null,true))" />
        
        </van-popup>
    <ul class="something" v-if='order'>
       
                 <template v-for="(o,p) in order">
                      <div    class="line"></div>
            <div class="m-order-unit" id="J-order-item">
        
        <div class="u-unit-link">
            <div class="m-order-top">
                <span class="m-order-title">
                    <span class="u-haitao-order" > 
                        {{o.typeinfo}}
                    </span>
                    <span>   {{o.shopInfo}}</span>
                    <span class="u-order-sn">下单时间 {{o.ADD_TIME}}</span>
                     </span>
                        <div class="common-status">{{OrderState(o.STATE)}}</div>
                          </div>
            <div class="OrderCell">
             <li v-for="(k,i) in o.LIST">
                <div class="something-middle">
                    <img :src="$conf.domain + '/' + k.PRO_PIC">
                </div>
                <div class="something-right">
                    <!-- <p>订单号:{{k.ID}}</p> -->
                    <p>名称:  {{k.PRO_NAME}}</p>
                    <p >规格: {{k.PRO_TYPE_NAME}} </p>
                
                    <p  v-if='k.PRO_SORT==1493'  >
                        
                       类型: 生鲜/特产
                    </p>
                     <p  v-if='k.PRO_SORT==1494'  >
                        
                       类型: 门票/玩乐
                    </p>
                     <p  v-if='k.PRO_SORT==1510'  >
                        
                       类型: 民宿/客栈
                    </p>
                     <p  v-if='k.PRO_SORT==1506'  >
                        
                       类型: 餐饮/美食
                    </p>
                     <p  >
                        ￥:{{k.MONEY_PRO}} × {{k.PRO_COUNT}}
                    </p>
                   
                    <p>
                    <span v-if="k.HUI_DIAN_USED>0">余额:{{k.USED_YU_E}}元</span>
                    <span v-if="k.HUI_DIAN_USED>0">积分:{{k.HUI_DIAN_USED}}个</span>
                    <!-- <span v-if="k.USED_BANK>0">充值:{{k.USED_BANK}}元</span> -->
                    <span v-if="k.PRO_SORT=='1494' && k.STATE2!=-1 && k.IF_TICKET_OUT==1 && k.TICKET_PIC && k.TICKET_PIC!=''"  @click="ShowTicketPic(k)">查看票二码</span>
                    <span v-if="k.PRO_SORT=='1494' && k.STATE2!=-1 && (k.IF_TICKET_OUT==2 || k.IF_TICKET_OUT==3) && k.TICKET_NUM"  @click="ShowTicketPic(k)">查看票二维码</span>
                    <span v-if="k.STATE2==4">已退款</span>
                    <span v-if="k.PRO_SORT=='1510' && k.STATE2==1">商家已确认</span>
                    <span v-if="k.PRO_SORT=='1510' && k.STATE2==0">待商家确认</span>
                    </p>
                    <p v-if="k.PRO_SORT=='1493' && k.KUAI_DI_DAN_HAO">
                    
                        快递单号:{{k.KUAI_DI_DAN_HAO}}</p>
                    <!-- <p v-if="k.PRO_SORT=='1493' && k.KUAI_DI_DAN_HAO">{{k.KUAI_DI_GONG_SI_NAME}},单号:{{k.KUAI_DI_DAN_HAO}}</p> -->
                    <div v-if="k.PRO_SORT=='1493' && k.STATE_FA_HUO_BUTTON=='1'"  @click="cut(k)">
                    <span class="vsent">收货</span>
                    </div>
                    <div v-if="k.TUI_STATUS=='1'"   @click="tui(k)">
                    <span class="vsent">退货</span>
                    </div>
                </div>
                <span class="vsent" v-if="k.cId==0 && k.PRO_SORT==1493 && o.STATE==1  && k.STATE2==2" @click="onNavigatePingLun(k)">发表评论  </span>
            </li>
            </div>
            <div class="m-order-total">
                <span class="total-num">共<span class="num">{{o.LIST.length}}</span>件商品</span>
                <span class="money">实付 <span class="num">{{o.MONEY_ALL}} 元</span></span>
                <span v-if="o.ALL_HUI_DIAN>0">可抵:{{o.ALL_HUI_DIAN}}</span>
            </div>
        </div>
        <div class="doshed" v-if="o.STATE_PAY_BUTTON=='1'" ></div>
        <div class="m-control">
          
            <button class="u-btn-rebuy J-rebuy-btn" v-if="o.STATE_PAY_BUTTON=='1'"  @click="ToPay(o)"  mars_sead="active_te_secondbuy_click_wap"
            >
                支付</button>
               
              </div>
            </div>
            </template>
         
        <!-- <template v-for="(o,p) in order">
                <div class="OrderCell">
                    <div class="Orderstart">
             
                        <p>订单编号:{{o.ORDER_ID}}</p>
                        <span>{{o.ADD_TIME}},</span>
                         <span>{{o.MONEY_ALL}}元</span>
                         <span v-if="o.ALL_HUI_DIAN>0">,可抵:{{o.ALL_HUI_DIAN}}</span>
                         <span>{{OrderState(o.STATE)}}</span>
                          </div>
            <li v-for="(k,i) in o.LIST">
                <div class="something-middle">
                    <img :src="$conf.domain + '/' + k.PRO_PIC">
                </div>
                <div class="something-right">
                
                    <p>名称:  {{k.PRO_NAME}}</p>
                    <p style="color:rgb(199, 108, 28)">规格: {{k.PRO_TYPE_NAME}} </p>
                
                    <p  v-if='k.PRO_SORT==1493' style="color:rgb(199, 108, 28)">
                        
                       类型: 生鲜/特产
                    </p>
                     <p  v-if='k.PRO_SORT==1494' style="color:rgb(199, 108, 28)">
                        
                       类型: 门票/玩乐
                    </p>
                     <p  v-if='k.PRO_SORT==1501' style="color:rgb(199, 108, 28)">
                        
                       类型: 民宿/客栈
                    </p>
                     <p  v-if='k.PRO_SORT==1506' style="color:rgb(199, 108, 28)">
                        
                       类型: 餐饮/美食
                    </p>
                     <p>
                     ￥:{{k.MONEY_PRO}} × {{k.PRO_COUNT}}
                    </span>
                    </p>
                    <p>
                    <span v-if="k.HUI_DIAN_USED>0">余额:{{k.USED_YU_E}}元</span>
                    <span v-if="k.HUI_DIAN_USED>0">积分:{{k.HUI_DIAN_USED}}个</span>
                    <span v-if="k.USED_BANK>0">充值:{{k.USED_BANK}}元</span>
                    <span v-if="k.PRO_SORT=='1494' && k.STATE2!=-1 && k.IF_TICKET_OUT==1 && k.TICKET_PIC && k.TICKET_PIC!=''"  @click="ShowTicketPic(k)">查看票二码</span>
                    <span v-if="k.PRO_SORT=='1494' && k.STATE2!=-1 && (k.IF_TICKET_OUT==2 || k.IF_TICKET_OUT==3) && k.TICKET_NUM"  @click="ShowTicketPic(k)">查看票二维码</span>
                    <span v-if="k.STATE2==4">已退款</span>
                    <span v-if="k.PRO_SORT=='1510' && k.STATE2==1">商家已确认</span>
                    <span v-if="k.PRO_SORT=='1510' && k.STATE2==0">待商家确认</span>
                    </p>
                    <p v-if="k.PRO_SORT=='1493' && k.KUAI_DI_DAN_HAO">{{k.KUAI_DI_GONG_SI_NAME}},单号:{{k.KUAI_DI_DAN_HAO}}</p>
                    <div v-if="k.PRO_SORT=='1493' && k.STATE_FA_HUO_BUTTON=='1'" class="something-right-bottom" @click="cut(k)">

                    <span>收货</span>
                    </div>
                    <div v-if="k.TUI_STATUS=='1'" class="something-right-bottom" @click="tui(k)">
                    <span>退货</span>
                    </div>
                </div>
                <span class="vsent" @click="onEvaluatePush(k)">发表评论</span>
            </li>
         
      
           <span class="vpay" v-if="o.STATE_PAY_BUTTON=='1'" @click="ToPay(o)">去支付</span>
            </div>
        </template> -->
        <template>
    <div class="evaluate_view">
        <!-- 评论弹窗 -->
        <!-- 评论弹窗 -->
        <van-popup class="reply_white" v-model="evaluatePushShow" position="center" closeable>
            <div class="reply_text_border">
                <textarea class="reply_textarea " v-model="replyValue" placeholder="请输入评论"></textarea>
                <div class="reply_num ">500/500字</div>
            </div>
            <div class="reply_uploader_rate">
                <div style="margin-right: 3.2rem;">评分</div>
                <van-rate v-model="reply_rate" size="1rem" color="#FFC900" />
                <div style="margin-left: 0.6rem;">{{reply_rate}}星</div>
            </div>

            <div class="reply_uploader_title">上传图片</div>
     
   <van-uploader class="reply_uploader" v-model="fileList" :multiple="true" :max-count="5" :after-read="replyUpload"  @delete="onPhotoDelete" />
            <div class="reply_button" @click="onPushCommon(oeninfo)">发表</div>
        </van-popup>
    </div>
</template>

    </ul>
  </div>
</template>

<script>
// 提示登录组件
import Gologin from "@/components/car/gologin.vue";
import MoneyVue from "@/components/car/pay/money.vue";
import Util from "../../util/common";
import { Popup, Dialog, Toast } from "vant";
import "vant/lib/index.css";
import '../../css/evaluate.css'

export default {
    props: ["order"],
    data() {
        return {
            showPay: false,
            pay: { Money: 0, Point: 0, OnLine: 0 ,ID:0},
            topayorder: { id: -1, rmb: 0, point: 0 },
            showPic: false,
            item: "",
            Util: Util,
            reply_rate: 3,
            fileList: [],
            imageList: [],
            replyValue: '',
           
            oeninfo: '',
            evaluatePushShow: false,
        };
    },
    components: {
        "v-gologin": Gologin,
        [Popup.name]: Popup,
        "v-Money": MoneyVue,
    },
    computed: {},

    mounted() {
        this.showPay = false;
        
    },
    methods: {
        ShowTicketPic(k) {
            this.showPic = true;
            this.item = k;
        },
        ToPay(o) {
            //.ID,o.PAY_MONEY,o.PAY_HUI_DIAN,o.PAY_CHONG_MONEY
          //  this.orderid=o.id;
        
            this.showPay = true;
            //this.$refs.moneyPage.getUserInfo();
            this.topayorder.id = o.ID;
            this.topayorder.rmb = o.MONEY_ALL;
            this.topayorder.point = o.ALL_HUI_DIAN;

            this.pay.Money = o.PAY_MONEY;
            this.pay.Point = o.PAY_HUI_DIAN;
            this.pay.OnLine = o.PAY_CHONG_MONEY;
            this.pay.ID = o.ID;
        
           // this.$refs.moneyPage.CheckInput();
        },
        tui(o) {
            Dialog.confirm({
                title: "",
                message: "确定退货么？",
            })
                .then(() => {
                    let obj = { id: o["ID"] };
                    obj["id"] = o.ID;
                    this.$dopost(
                        "/sysapi/order/tui/",
                        obj,
                        function (res) {
                            if (
                                res.data &&
                                typeof res.data.error != "undefined" &&
                                res.data.error === 0
                            ) {
                                o.STATE2 = "4";
                                Toast(res.data && res.data.mess ? res.data.mess : "操作成功");
                            } else {
                                Toast(res.data && res.data.mess ? res.data.mess : "出错了！");
                            }
                        }.bind(this),
                        true
                    );
                })
                .catch(() => {
                    // on cancel
                });
        },
        cut(o) {
            Dialog.confirm({
                title: "",
                message: "确定收货么？",
            })
                .then(() => {
                    let obj = { api_user: this.$store.state.login.username };
                    obj["id"] = o.ID;
                    this.$dopost(
                        "/sysapi/order/shou_huo/",
                        obj,
                        function (res) {
                            if (
                                res.data &&
                                typeof res.data.error != "undefined" &&
                                res.data.error === 0
                            ) {
                                if (res.data.data.state && res.data.data.state == "ok") {
                                    Toast("收货成功！");
                                } else {
                                    Toast("收货失败！");
                                }
                            } else {
                                Toast(res.data && res.data.mess ? res.data.mess : "出错了！");
                            }
                        }.bind(this),
                        true
                    );
                })
                .catch(() => {
                    // on cancel
                });
        },
        onSetState(stat) {
            this.showPay = stat;
        },
        OrderState(state) {
            let r = "";
            if (state == 1) {
                r = "已支付";
            }
            if (state == 0) {
                r = "未支付";
            }
            if (state == 0.1) {
                r = "未支付";
            }
            if (state == -1 || state == -1.1) {
                r = "已取消";
            }
            return r;
        },
        // 上传图片
        replyUpload(e) {
       var that = this;
        var formData = new FormData();

        if(Array.isArray(e)){
          e.map((item,index) => {
            formData.append('Filedata', e[index].file);
            that.$fly.post(`${that.domainUrl}/system/upload/file?pic_type=999999999`,formData).then(res => {
            var srcType = res.data.substring(0,7)
              if(srcType=='upload/'){
                this.imageList.push(res.data)
              }else{
                that.$toast('上传失败1')
                that.fileList.splice(index,1);
                // that.fileList.pop()
              }
            }).catch(err => {
              that.$toast('上传失败2')
              that.fileList.splice(index,1);
            })
          })
        }else{
          formData.append('Filedata', e.file);
          that.$fly.post(`${that.domainUrl}/system/upload/file?pic_type=999999999`,formData).then(res => {
          var srcType = res.data.substring(0,7)
            if(srcType=='upload/'){
              this.imageList.push(res.data)
            }else{
              that.$toast('上传失败3')
              that.fileList.pop()
            }
          }).catch(err => {
              
            that.$toast('上传失败4')
            that.fileList.pop()
          })
        }

 
        },
        //删除图片
        onPhotoDelete(e, item) {
            this.imageList.splice(item.index, 1)
        },
        //发表评论
        onEvaluatePush(k) {

            this.fileList = []
            this.imageList = []
            this.replyValue = '',
            this.oeninfo = k;
            this.evaluatePushShow = true
        },
          onNavigatePingLun(k) {
               
            this.$router.push({
                path: '/OrderComment',
                query: {
                    id: k.PRO_ID,
                    module: 5,
                    detail_id: k.ID,
                    order_id: k.ORDER_ID,

                }
            })
        },
 
        // 发表评论
        onPushCommon(k) {
            let amo = 5;

            var that = this;
            var token = this.$store.state.login.token
            if (token != 1) {
                this.$toast('请先登录');
            } else {
                //oeninfoo.PRO_SORT
                if (k.PRO_SORT != 1493) {
                    amo = 1;
                }
                var data = {
                    to_id: k.PRO_ID,
                    module: amo,
                    pic1: this.imageList[0] == undefined ? '' : this.imageList[0],
                    pic2: this.imageList[1] == undefined ? '' : this.imageList[1],
                    pic3: this.imageList[2] == undefined ? '' : this.imageList[2],
                    pic4: this.imageList[3] == undefined ? '' : this.imageList[3],
                    pic5: this.imageList[4] == undefined ? '' : this.imageList[4],
                    mess: this.replyValue,
                    point: this.reply_rate,
                    detail_id: k.ID,
                    order_id: k.ORDER_ID,
                }
                this.$dopost('/sysapi/comment/send/', data, function (res) {
                    if (res.data && typeof (res.data.error) != "undefined" && res.data.error === 0) {
                        this.$toast('评论成功');
                        this.evaluatePushShow = false;
                   //   location.reload();

                    } else {
                        Toast((res.data && res.data.mess) ? res.data.mess : '接口错误');
                    }
                }.bind(this), true);
            }
        },
    },
};
</script>

<style lang="less" scoped>
@import "../../assets/fz.less";

.wrap {
    width: 100%;
    .something {
        width: 100%;
        .OrderCell {
            font-size: 14px;
            padding-left: 2px;
            padding-top: 0vh;
            // .Orderstart {
            //     bottom: 5%;
            // }

            .vpay {
                display: block;
                position: absolute;
                right: 5%;
                bottom: 5%;
                padding: 4px 8px;
                font-size: 14px;
                color: #666666;
                border: 1px solid #cccccc;
                border-radius: 5px;
            }

            > li {
                display: -ms-flex;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                padding: 1vw 2vw;
                position: relative;
                height: 40vw;
                .vsent {
                    display: block;
                    position: absolute;
                    right: 5%;
                    bottom: 5%;
                    padding: 4px 8px;
                    font-size: 14px;
                    color: #666666;
                    border: 1px solid #cccccc;
                    border-radius: 5px;
                }

                .bd();
                .something-left {
                    -ms-flex: 2;
                    -webkit-box-flex: 2;
                    flex: 2;

                    label {
                        float: left;
                        background: url("../../assets/car/images/t.svg")
                            no-repeat center center/50% 50%;
                        input {
                            height: 14vw;
                            width: 14vw;
                            opacity: 0;
                            filter: alpha(opacity=0);
                        }
                    }
                    .false {
                        background: url("../../assets/car/images/f.svg")
                            no-repeat center center / 50% 50% !important;
                    }
                }
                .something-middle {
                    -ms-flex: 7;
                    -webkit-box-flex: 7;
                    flex: 7;
                    height: 34vw;
                    padding-left: 0.5vw;
                    -webkit-box-sizing: border-box;
                    box-sizing: border-box;
                    img {
                        display: block;

                        width: 100%;
                        border-radius: 5px;
                        //height: 100%;
                    }
                }
                .something-right {
                    -ms-flex: 12;
                    -webkit-box-flex: 12;
                    flex: 12;
                    padding-left: 3.5vw;
                    margin-top: -33px;
                    p {
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        .fz(font-size,28);

                        max-width: 48vw;
                        overflow: hidden;
                        white-space: nowrap;
                    }
                    // p:last-of-type {
                    //     .fz(font-size,22);
                    //     color: rgb(168, 168, 168);
                    // }
                    // p:nth-last-of-type(2) {
                    //     .fz(font-size,22);
                    //     color: rgb(168, 168, 168);
                    // }
                    .something-right-bottom {
                        > div {
                            display: -ms-flex;
                            display: -webkit-box;
                            display: -ms-flexbox;
                            display: flex;
                            -webkit-box-align: center;
                            -ms-flex-align: center;
                            align-items: center;
                            input {
                                width: 6vw;
                                text-align: center;
                            }

                            span {
                                height: 7vw;
                                line-height: 7vw;
                                width: 8vw;
                                display: inline-block;
                                border: 0.2vw solid #f1f1f1;
                                border-radius: 1vw;
                                text-align: center;
                                font-size: 20px;
                                cursor: pointer;
                            }
                        }
                        > span {
                            position: absolute;
                            right: 0;
                            bottom: 0;
                            width: 13vw;
                            height: 13vw;
                            //background: url("../../assets/car/images/laji.svg") no-repeat center/50%;
                        }
                    }
                }
            }
        }
    }
}

.m-order-unit {
    display: block;
    margin-top: 0.86667rem;
    background-color: #fff;
}

.m-order-unit .u-unit-link {
    display: block;
}

.m-order-unit .u-unit-link .m-order-top {
    margin: 0px 0.54rem;
    line-height: 3.33333rem;
    font-size: 0.875rem;
    color: #222;
    border-bottom: 0.12667rem solid #e7e7e7;
}

.m-order-unit .u-unit-link .m-order-top span {
    display: inline-block;
    line-height: 0.42667rem;
    vertical-align: middle;
}

.m-order-unit .u-unit-link .m-order-top .unpaid-status {
    color: #ffa11a;
    float: right;
}

.m-order-unit .u-unit-link .m-order-top .common-status {
    color: #98989f;
    float: right;
}

.m-order-unit .u-unit-link .m-order-top .u-order-sn {
    display: block;
    margin-top: 0.57rem;
    color: #98989f;
    font-size: 12px;
}
.u-haitao-order {
    padding: 10px 5px;
    height: 6px;
    line-height: 12px;
    color: #fff;
    background: #01a862;
}

.u-haitao-order,
.u-mp-haitao-order {
    display: inline-block;
    margin-right: 0.43333rem;
    vertical-align: middle;
    font-size: 0.875rem;
    border-radius: 0.02667rem;
}

.u-mp-haitao-order {
    margin-top: -0.05333rem;
    padding: 0 0.10667rem;
    height: 0.4rem;
    line-height: 0.4rem;
    color: #6c5eab;
    background-color: #fcfbfe;
    position: relative;
}

.u-mp-haitao-order:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border: 0.02667rem solid rgba(108, 94, 171, 0.5);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    // -webkit-transform: scale(0.5);
    // transform: scale(0.5);
    // -webkit-transform-origin: left top;
    // transform-origin: left top;
}

.m-order-total {
    margin: 0 0.4rem;
    color: #222;
    text-align: right;
    padding-bottom: 0.4rem;
}

.m-order-total .total-num {
    font-size: 0.875rem;
    color: #98989f;
}

.m-order-total .total-num .num {
    color: #222;
    padding: 0 0.02667rem;
}

.m-order-total .money {
    padding-left: 0.37333rem;
    font-size: 0.875rem;
}

.exchange-new-order-tips {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 0.4rem;
    padding: 0.52rem 0;
    border-top: 0.02667rem dashed #d3d3c3;
    font-size: 0.875rem;
    color: #222;
    line-height: normal;
}

.exchange-new-order-tips span {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.m-control {
    padding: 0.4rem 0;
    margin: 0 0.4rem;
    text-align: right;
    border-top: 0.02667rem dashed #d3d3c3;
}

.m-control .u-btn-pay {
    outline: none;
    display: inline-block;
    width: 2.53333rem;
    height: 0.96rem;
    line-height: 0.96rem;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 700;
    color: #fff;
    border: none;
    border-radius: 0.05333rem;
    background: #f03867;
}

.m-control .u-btn-pay.disable {
    background: #e2e2e2;
}

.m-control .u-btn-track {
    margin-left: 0.4rem;
    color: #585c64;
    border: 0.02667rem solid #585c64;
    border-radius: 0.05333rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.m-control .u-btn-rebuy,
.m-control .u-btn-track {
    display: inline-block;
    width: 5.24rem;
    height: 1.96rem;
    line-height: 0.6rem;
    text-align: center;
    font-size: 0.875rem;
}

.m-control .u-btn-rebuy {
    padding-left: 0;
    padding-right: 0;
    color: #01a862;
    border: 0.0667rem solid #01a862;
    border-radius: 0.05333rem;
    background: #fff;
}

.m-without-order {
    width: 100%;
    height: 100%;
    padding-top: 1.12rem;
    text-align: center;
    background: #fff;
}

.m-without-order .u-without-img {
    width: 4.26667rem;
    height: 4.26667rem;
    margin-bottom: 0.10667rem;
    background-image: url();
    -webkit-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
}

.m-without-order .u-without-title {
    display: block;
    color: #585c64;
    font-size: 0.875rem;
    margin-bottom: 0.26667rem;
}

.m-order-title {
    position: relative;
    font-size: 0;
    height: 3.6367rem;
}
.m-order-title span {
    font-size: 0.875rem;
}
.m-order-top {
    position: relative;
}

.m-order-top .u-store-site {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.line {
    width: 100%;
    height: 10px;
    background: #f3f4f5;
    margin: 8px auto 4px;
}
.doshed {
    width: 96%;
    margin: 0 auto;
    height: 0;
    background: #ffffff;
    border-bottom: 2px dotted #f3f4f5;
}
</style>